<template>
  <div id="xzfx">
    <!-- tit -->
    <div class="tit">
      <h2>现状分析</h2>
      <div class="empty-box"></div>
      <p>一诺万金，专注基层社区治理工作的现代化</p>
    </div>
    <!-- con -->
    <div class="con">
      <div
        class="item-box"
        v-for="item in message"
        :key="item.img"
      >
        <div class="img-box">
          <img :src="item.img" alt="">
        </div>
        <div class="text-box">
          <h2>{{ item.mainTit }}</h2>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Xzfx",
    data() {
      return {
        message: [
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/24/20210924173801PAC8V1.png",
            mainTit: "社区基础数据不健全",
            content: "社区基础数据主要靠社区网格员上门登记，工作量巨大，人口流动性大，及时更新困难，长期以来，导致社区和重点场所人口底数不清，情况不明。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/24/20210924173801EAn0k1.png",
            mainTit: "服务方式偏传统",
            content: "社区服务方式偏向于纸笔登记、电话问询等传统方式，没有建设线上的社区服务平台，或者原有平台系统冗杂，不能聚焦社区工作人员的核心需求。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/24/20210924173801cQSo4g.png",
            mainTit: "社区宣传不及时",
            content: "随着社区治理的工作内容越来越多，面向基层的各种说明文件，指导政策等与日俱增，如何及时的向社区居民宣传成为社区治理工作的重要课题。"
          },
          {
            img: "https://www.1nuoyun.com/uploadfile/2021/09/24/20210924173801GUOi1z.png",
            mainTit: "共建共治缺工具",
            content: "社区共建共治停留在表面工作，主管单位与社区居民没有良好的衔接工具，导致社区居民生活中的各种诉求无法及时与主管单位进行有效的传达和协商。"
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  // PC端
  #xzfx {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      }
    }

    .con {
      padding: 4rem;
      box-shadow: 0 0 1rem #f5f5f5;
      display: flex;
      justify-content: space-between;
      text-align: center;
      .item-box {
        margin: 0 1.6rem;
        .text-box {
          padding:  13rem 4rem 4rem;
          margin-top: -9rem;
          background-color: #f5f5f5;
          h2 {
            font-size: 2rem;
            font-weight: 1000;
            color: #1890ff;
            white-space: nowrap;
            margin-bottom: 2.4rem;
          }
          p {
            font-size: 1.4rem;
            color: #666;
            text-align: justify;
          }
        }
      }
    }

    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-0.5rem);
    }
  }
</style>